<template>
    <div class="person">
        <h2>当前求和为：{{ sum }}</h2>
        <button @click="changesum">加1求和</button>
    </div>
</template>

<script lang="ts" setup name="Person"> 
    import {ref,watch} from 'vue';
    let sum = ref(0);
    function changesum(){
        sum.value += 1;
    }
    // 监视
    const stopwatch = watch(sum,(newValue,oldValue)=>{
        console.log('sum变化了',newValue,oldValue);
        //结束监视
        if(sum.value >5){
            stopwatch();
        }
    })
    console.log(stopwatch);
</script>

<style>
    .person{
        background-color: rgb(251, 95, 121);
        border-radius: 10px;
        /* height: 150px; */
        width: 300px;
        box-shadow: 0 0 10px;
    }
</style>